<template>
  <div class="rb-steps">
    <ul class="wrap">
      <li class="item" v-for="item in list " :key="item.title">
        <img class="icon" :src="getStatusImage(item.status)" alt="" srcset="">
        <div class="title">
          <span :style="{ color: item.status == '2' ? 'red' : '' }">{{ item.title }}</span>
          <i class="iconfont icon-bi usericon" v-if="item.canEdit"></i>
          <div class="interview-box" v-if="item.interviewStatus" :style="item.interviewStatus.style"
            @click="handleClick(item)">
            <DingdingOutlined v-show="item.interviewStatus.dd_icon" />
            {{ item.interviewStatus.text }}
          </div>
        </div>
        <div class="tip-wrap">
          <div class="tip" v-for="el in item.tip" :key="el.label">
            <div class="tip-left" v-show="el.label">{{ el.label }}:</div>
            <div class="tip-right">{{ el.value }}</div>
          </div>
        </div>
        <div class="sub-list" v-if="item.subList">
          <ul>
            <li v-for="el in item.subList">
              <div>{{ el.key }}：</div>
              <div>{{ el.value }}</div>
            </li>
          </ul>
        </div>
        <div class="content" v-if="item.content">
          <TextClamp :content="item.content"></TextClamp>
        </div>
        <div class="evaluateList" v-if="item.evaluateList">
          <div class="context" v-for="(el, idx) in item.evaluateList">
            <div class="top">
              <div class="index">
                <span>{{ idx + 1 }}</span>
              </div>
              <span>培训评价</span>
              <div class="top-right">
                <div>
                  评价录入：{{ el.person }}
                </div>
                <div>
                  操作时间：{{ el.time }}
                </div>
              </div>
            </div>
            <div class="detail">
              <TextClamp :content="el.content"></TextClamp>
            </div>
          </div>
          <div class="add-comment" @click="addComment(item)">新增评价</div>
        </div>

        <div class="evaluateList" v-if="item.commentList">
          <div class="context" v-for="(el, idx) in item.commentList">
            <div class="top">
              <div class="index">
                <span>{{ idx + 1 }}</span>
              </div>
              <span class="status-box">
                <span>培训官{{ idx + 1 }}评价录入：</span>
                <div class="status" :style="el.status.style">{{ el.status.text }}</div>
              </span>
              <div class="top-right">
                <div>
                  评价录入：{{ el.person }}
                </div>
                <div>
                  操作时间：{{ el.time }}
                </div>
              </div>
            </div>
            <div class="detail">
              <TextClamp :content="el.content"></TextClamp>
            </div>
          </div>
        </div>

        <div class="btns" v-if="item.button">
          <Button color="primary" @click="handleBtnClick(item)">{{ item.button.name }}</Button>
        </div>
        <div class="operator" v-show="item.operator">
          <div class="operator-person">操作人：{{ item.operator?.person }}</div>
          <div class="operator-time">操作时间：{{ item.operator?.date }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import TextClamp from "../../components/TextClamp.vue";
import { Button } from '@/components/Button';
import { getImageUrl } from "@/assets/common/common.ts";
const getTip = (step) => {
  // 根据不同进度返回不同的顶部字段；
  const map = {
    "0": [
      {
        label: "投递时间",
        value: "2024-10-20 10:0"
      },
    ],
    '1': [
      {
        label: "面试官分配",
        value: "王蒙-hr"
      },
      {
        label: "面试时间",
        value: "2024-10-20 10:00"
      },
      {
        label: "面试类型",
        value: "线上面试"
      }
    ],
    "2": [
      {
        label: "面试官",
        value: "李猛-HR"
      },
      {
        label: "面试类型",
        value: "线上面试"
      }
    ],
    "3": [
      {
        label: "培训期数：2024",
        value: "2024-06-24 至 2024-07-18"
      },
      {
        label: "培训官",
        value: "郑盈、李炯泽、孙韬"
      }
    ],
    "4": [
      {
        label: "考核官",
        value: "郑盈、李炯泽、孙韬"
      },

      {
        label: "考核时间：2024",
        value: "2024-07-15 15:35"
      }

    ]
  }
  return map[step]
}
const getStatusImage = (status) => {
  const map = {
    "1": "success",
    '2': "error",
    "3": "warning",
    "4": "watting"
  }
  return getImageUrl(`${map[status]}.png`, 'applicationDetail')
}

const getInterviewStatus = (status) => {
  const map = {
    "1": {
      text: "通过",
      style: {
        background: 'rgba(32, 158, 228, 0.2)',
        color: '#209EE4'
      }
    },
    '2': { text: "淘汰", style: { color: "#FF4242", background: "rgba(255,66,66,0.2)" } },
    "3": { text: "放弃", style: { color: "#EC9903", background: "rgba(240,160,61,0.2)" } },
    "4": {
      text: "查看《参培协议》", methodName: 'checkAgreeMent', style: { background: "#fff ", textDecoration: 'underline', cursor: 'pointer', color: "#209ee4" }
    },
    "5": {
      text: "已加入钉钉群", dd_icon: true, style: {
        background: 'rgba(32, 158, 228, 0.2)',
        color: '#209EE4'
      }
    },
  }
  return map[status]
}

const getEvaluateList = () => {
  return [
    {
      label: "培训评价",
      time: "2024-07-15 15:35",
      person: "培训官1",
      content: ""
    },
    {
      label: "培训评价",
      time: "2024-07-15 15:35",
      person: "培训官1",
      content: ""
    },
  ]
}

const getCommentList = () => {
  return [
    {
      status: getInterviewStatus("1"),
      label: "考核官1评价",
      time: "2024-07-15 15:35",
      person: "培训官1",
      content: ""
    },
    {
      status: getInterviewStatus("1"),
      label: "培训评价",
      time: "2024-07-15 15:35",
      person: "培训官1",
      content: ""
    },
    {
      status: getInterviewStatus("2"),
      label: "培训评价",
      time: "2024-07-15 15:35",
      person: "培训官1",
      content: ""
    },
  ]
}


const list = ref([
  {
    title: '入职',
    tip: getTip('1'),
    status: "1",
  },
 
  {
    title: '实习',
    status: "4",
    tip: getTip('3'),
    operator: {
      person: "张三", date: '2024-10-12'
    },
    commentList: getCommentList(),
  },
])
const checkAgreeMent = (item) => {
  console.log(item)
}
const handleClick = (item) => {
  const map = {
    checkAgreeMent: checkAgreeMent(item)
  }
  map[item.methodName]
}

const handleBtnClick = (item) => {
  const map = {
    sendAgain: sendAgain(item)
  }
  map[item.method]
}

const sendAgain = (item) => {
  console.log(item, '===>sendagain')
}

const addComment = (item) => {
  console.log(item, '===>addComment')
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  margin-top: 31px;

  .item {
    padding-bottom: 58px;
    border-left: 1px dashed #16C716;
    position: relative;
    padding-left: 17px;
    box-sizing: border-box;

    &:last-child {
      border-left: 1px dashed transparent;
    }

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 19px;
      position: absolute;
      top: -12px;
      display: flex;
      align-items: center;

      .usericon {
        cursor: pointer;
        color: #209ee4;
        margin-left: 6px;
      }

      .interview-box {
        height: 24px;
        padding: 0 8px;
        box-sizing: border-box;


        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        line-height: 24px;
        margin-left: 20px;
      }
    }

    .icon {
      position: absolute;
      top: -12px;
      left: -12px;
    }

    .content {
      padding: 16px;
      box-sizing: border-box;
      background: #F5F7FB;
      border-radius: 3px 3px 3px 3px;
      color: #333;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;

      .hideOrExpand {
        color: #209ee4;
        cursor: pointer;
      }
    }
  }
}

.tip-wrap {
  display: flex;
  color: #333;
  flex-direction: column;
  // gap:10px;
  margin:12px 0;
  box-sizing: border-box;
  .tip {
    display: flex;
    margin-top: 10px;
    margin-right: 40px;
    .tip-left {
      margin-right: 10px;
      ;
    }
  }
}

.operator {
  display: flex;
  margin-top: 20px;

  font-weight: 400;
  font-size: 14px;
  color: #B3C0C8;
  line-height: 16px;

  .operator-person {
    margin-right: 40px;

  }
}

.index {
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #8F87D8;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  position: relative;
  color: #fff;

  span {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &::after {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #8F87D8;
    position: absolute;
    left: -4px;
    bottom: 1px;
  }
}

.evaluateList {
  display: flex;
  flex-direction: column;

  .context {
    background: #F5F7FB;
    border-radius: 3px 3px 3px 3px;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 20px;

    &:nth-child(1) {
      margin-top: 0;
    }

    .top {
      display: flex;
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      white-space: nowrap;
      .top-right {
        position: absolute;
        right: 20px;
        display: flex;
        font-size: 14px;
        color: #666;
        font-size: 400;
        gap: 40px;
      }
    }
  }

  .detail {
    font-size: 14px;
    color: #666;
    font-size: 400;
    line-height: 28px;
  }

  .add-comment {
    font-weight: 400;
    font-size: 14px;
    color: #209EE4;
    line-height: 19px;
    margin-top: 8px;
    text-decoration-line: underline;
    cursor: pointer;
  }
}

.status-box {
  display: flex;

  div {
    font-size: 14px;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 4px;
  }
}

.sub-list {
  li {
    display: flex;
    gap: 5px;
    margin-top: 10px;
  }
}
</style>